html {
  font-size: 18px;
  background-color: rgb(195, 224, 233);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.w {
  width: 75rem;
  margin: 0 auto;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
textarea {
  outline: none;
}
.container {
  width: 100%;
  // 个人主页头部部分

  .container-hd {
    height: 15rem;
    .banner {
      -webkit-display: flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
      height: 80%;
      background: url(../images/banner4.jpg);
      .head {
        display: flex;
        width: 30%;
        height: 80%;
        border-radius: 0.625rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgb(175, 169, 218, 0.9);
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        opacity: 0.7;
        &:hover {
          box-shadow: 0px 0px 20px skyblue;
        }
        #headbox {
          img {
            width: 4rem;
            margin-left: 1rem;
          }
        }
      }
    }
    .nav {
      display: flex;
      height: 20%;
      background-color: #fff;
      flex-direction: row;
      justify-content: center;
      ul {
        display: flex;
        width: 60%;
        flex-direction: row;
        justify-content: center;
        li {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          color: skyblue;
          a {
            color: skyblue;
            margin-bottom: 0.25rem;
          }
          span {
            padding: 0.25rem;
            border-bottom: 0.3rem solid transparent;
          }
          &:hover {
            // 用个span将文字给包起来，才能让下边框和字体长度一样长
            span {
              // 把盒子改为border-box，让下划线在内显示，不向外突出
              box-sizing: border-box;
              border-bottom: 0.3rem solid #ffd155;
            }
          }
        }
      }
    }
  }

  //   个人主页主体

  .container-bd {
    position: relative;
    top: 0;
    left: 0;
    height: 30rem;
    margin-top: 1rem;
    .left {
      position: absolute;
      top: 3rem;
      left: 0rem;
      display: flex;
      width: 12rem;
      height: 100%;
      margin-right: 1rem;
      padding: 0.5rem;
      background: rgba(151, 182, 216, 0.7);
      filter: alpha(opacity=90);
      -moz-opacity: 0.9;
      opacity: 0.9;
      flex-direction: column;
      .up {
        flex: 2;
        .imgBox {
          width: 50%;
          // height: 20%;
          margin: 0 auto;
          margin-top: 15%;
          input {
            display: none;
          }
          img {
            width: 100%;
            background-color: #fff;
          }
        }
        ul {
          li {
            margin-top: 0.6rem;
            font-size: 1.25rem;
            h3 {
              text-align: center;
            }
          }
        }
      }
    }
    .center {
      position: relative;
      top: 0;
      left: 13rem;

      float: left;
      width: 75rem - 12rem - 5rem - 2rem;
      height: 100%;
      margin-right: 1rem;

      .ce_ul {
        display: flex;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        flex-direction: row;
        justify-content: space-around;

        li {
          flex: 1;
          text-align: center;
          border-left: 2px solid #ccc;
          &:hover {
            background-color: rgb(148, 193, 211);
          }
        }
        #all {
          border-left: 0;
        }
        #insec {
          height: 1.5625rem;
          border: 0.125rem solid skyblue;
          outline: none;
        }
        #search {
          width: 2rem;
          height: 1.5625rem;
          border: 0.125rem solid skyblue;
          outline: none;
        }
      }
      .reveal,
      .showSearch {
        padding: 0.5rem;
        background-color: rgba(160, 180, 220, 0.5);
        ul,
        .showUl {
          li {
            border-bottom: 0.125rem dashed #3b9fc7;
            h2 {
              text-align: center;
            }
            .div1 {
              display: flex;
              span {
                flex: 1;
                font-size: 0.75rem;
                color: rgb(222, 237, 243);
              }
            }
            div {
              padding: 0.5rem 0;
              overflow: hidden;
              text-overflow: ellipsis; //超出部分以省略号显示
              white-space: nowrap;
            }
          }
        }
      }
      // 发动态
      .launch {
        #toall,
        #sub,
        #keep {
          float: left;
          width: 3.5rem;
          height: 1.5rem;
        }
        #sub {
          float: right;
        }
        #keep {
          margin-left: 45%;
        }

        #laTitle {
          width: 40rem;
          height: 2rem;
          padding: 0.125rem 0.5rem;
          margin-top: 2rem;
          margin-left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          border-radius: 1.25rem;
          border: 0.125rem solid skyblue;
          &::placeholder {
            font-size: 0.9375rem;
            letter-spacing: 0.125rem;
          }
        }
        #laText {
          width: 40rem;
          height: 10rem;
          padding: 0.5rem;
          margin-top: 1.5rem;
          margin-left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          border-radius: 0.25rem;
          border: 0.125rem solid skyblue;
          resize: none;
          &::placeholder {
            font-size: 0.9375rem;
            letter-spacing: 0.125rem;
          }
        }
        .textImg {
          margin-bottom: 0.3125rem;
          input {
            display: none;
          }
          .action {
            display: block;
            width: 7rem;
            height: 9rem;
            font-size: 5.5rem;
            background-color: rgba(141, 197, 214, 0.3);
          }
        }
      }
      #show {
        padding: 0.5rem;
        background-color: rgba(160, 180, 220, 0.5);
        img {
          height: 8rem;
        }
        h2 {
          text-align: center;
          margin-bottom: 0.5rem;
        }
        div {
          display: flex;
          span {
            flex: 1;
            font-size: 0.75rem;
            color: #deedf3;
          }
        }
        .detailConent,
        .secConent {
          padding: 0.5rem;
        }
        .btnBox {
          padding: 0.5rem;
          justify-content: space-between;
          button {
            float: left;
            width: 3.5rem;
            height: 1.5rem;
          }
        }
      }

      .showTip {
        margin-top: 0.625rem;
        padding: 0.3125rem;
        font-size: 1.875rem;
        border: 0.125rem solid skyblue;
        border-radius: 0.625rem;
        background-color: #fff;
        color: skyblue;
      }
      //搜索动态

      .right {
        float: right;
        width: 4.5rem;
        height: 100%;
        background-color: wheat;
      }
      // 添加图片到个人相册详情
      #AlDetails {
        .action {
          display: block;
          width: 7rem;
          height: 9rem;
          font-size: 5.5rem;
          background-color: rgba(141, 197, 214, 0.3);
        }
      }
      //点击个人相册图片时的提示框 查看&删除
      .prompt {
        position: absolute;
        top: 30%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 12.5rem;
        height: 6.25rem;
      }
    }

    //个人相册
    #album {
      h2 {
        text-align: center;
        margin-top: 0.5rem;
      }
      .addTit {
        width: 40rem;
        height: 2rem;
        padding: 0.125rem 0.5rem;
        margin-left: 15%;
        border-radius: 1.25rem;
        border: 0.125rem solid skyblue;
      }
      #addAl {
        width: 4rem;
        height: 2rem;
        border-radius: 1rem;
        border: 0.125rem solid skyblue;
        background-color: #fff;
      }
      .addBox {
        div {
          display: inline-block;
          height: 11rem;
          width: 7.5rem;
          padding: 0.5rem;
          margin: 0.85rem;
          border-radius: 1rem;
          border: 0.125rem solid skyblue;
          h4 {
            text-align: center;
            margin-bottom: 0.5rem;
            overflow: hidden;
            text-overflow: ellipsis; //超出部分以省略号显示
            white-space: nowrap;
          }
          img {
            width: 6.25rem;
            height: 7.5rem;
            border-radius: 0.6rem;
            border: 0.125rem solid skyblue;
          }
        }
      }
    }
    #AlDetails {
      position: relative;
      top: 0;
      left: 13rem;
      .action {
        display: block;
        width: 7rem;
        height: 9rem;
        margin-bottom: 1rem;
        font-size: 5.5rem;
        background-color: rgba(141, 197, 214, 0.3);
      }
      button {
        position: absolute;
        top: 3rem;
        right: 0rem;
        width: 4rem;
        height: 2rem;
        border-radius: 1rem;
        border: 0.125rem solid skyblue;
        background-color: #fff;
      }
    }
    .prompt {
      position: fixed;
      top: 40%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      padding: 1rem;
      background-color: #fff;
      border-radius: 1.5rem;
      border: 0.2rem solid skyblue;
      span {
        display: inline-block;
        height: 2rem;
        padding: 0.25rem;
        border-radius: 1rem;
        border: 0.125rem solid skyblue;
        background-color: #fff;
        &:nth-child(2) {
          margin: 0 0.8rem;
        }
      }
    }
    //草稿箱
    #draft {
      h2 {
        text-align: center;
        margin: 0.5rem 0;
      }
      button {
        float: left;
        width: 3.5rem;
        height: 1.5rem;
      }
      #tosub {
        float: right;
      }
      .text {
        .keepTitle,
        .keepText {
          width: 40rem;
          height: 2rem;
          padding: 0.125rem 0.5rem;
          margin-top: 2rem;
          margin-left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
          border-radius: 1.25rem;
          border: 0.125rem solid skyblue;
        }
        .keepText {
          height: 10rem;
          margin-top: 1.5rem;
          font-size: 1.125rem;
          color: black;
          border-radius: 0.25rem;
          resize: none;
        }
      }
    }
  }
}
//专用提醒盒子
.told {
  position: fixed;
  left: 40%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 8rem;
  padding: 1rem;
  border-radius: 2rem;
  z-index: 100;
  background-color: #fff;
  border: 0.125rem solid skyblue;
  box-sizing: border-box;
  &:hover {
    box-shadow: 0px 0px 20px skyblue;
  }
  button {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
}
//查看图片详情
.showPic {
  position: fixed;
  top: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 20rem;
  border: 3rem solid #e4f1f7;
  border-radius: 0.25rem;
  box-shadow: 0px 0px 20px skyblue;
  z-index: 10;
}
